<template>
  <div class="x6-graph-wrap">
    我有问题
    <div ref="container" class="x6-graph" />
  </div>

<!--  <a-menu ref="cmenu">-->
<!--    <a-menu-item key="1">1st menu item</a-menu-item>-->
<!--    <a-menu-item key="2">2nd menu item</a-menu-item>-->
<!--    <a-menu-item key="3">-->
<!--      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">-->
<!--        3rd menu item-->
<!--      </a>-->
<!--    </a-menu-item>-->
<!--    <a-menu-item key="4" danger="true">-->
<!--      a danger item-->
<!--    </a-menu-item>-->
<!--  </a-menu>-->

</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph } from '@antv/x6' /*ToolsView, EdgeView*/
import '../index.less'

//   <!--这个文件有问题？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？-->

// class ContextMenuTool extends ToolsView.ToolItem<EdgeView,ContextMenuToolOptions> {
//   private knob: HTMLDivElement
//
//   constructor() {
//     super();
//     super.render()
//     this.knob = ToolsView.createElement('div', false) as HTMLDivElement
//     this.knob.style.position = 'absolute'
//     this.container.appendChild(this.knob)
//     this.updatePosition(this.options)
//     setTimeout(() => {
//       this.toggleTooltip(true)
//     })
//     return this
//   }
//
//   // render() {
//   //   super.render()
//   //   this.knob = ToolsView.createElement('div', false) as HTMLDivElement
//   //   this.knob.style.position = 'absolute'
//   //   this.container.appendChild(this.knob)
//   //   this.updatePosition(this.options)
//   //   setTimeout(() => {
//   //     this.toggleTooltip(true)
//   //   })
//   //   return this
//   // }
//
//   private toggleTooltip(visible: boolean) {
//     // ReactDom.unmountComponentAtNode(this.knob)
//     document.removeEventListener('mousedown', this.onMouseDown)
//
//     if (visible) {
//     //   ReactDom.render(
//     //       <Dropdown
//     //           visible={true}
//     //   trigger={['contextMenu']}
//     //   overlay={this.options.menu}
//     //       >
//     //       <a />
//     //       </Dropdown>,
//     //   this.knob,
//     // )
//       document.addEventListener('mousedown', this.onMouseDown)
//     }
//   }
//
//   private updatePosition(pos?: { x: number; y: number }) {
//     const style = this.knob.style
//     if (pos) {
//       style.left = `${pos.x}px`
//       style.top = `${pos.y}px`
//     } else {
//       style.left = '-1000px'
//       style.top = '-1000px'
//     }
//   }
//
//   private onMouseDown = (e: MouseEvent) => {
//     this.updatePosition()
//     this.toggleTooltip(false)
//   }
// }
//
// ContextMenuTool.config({
//   tagName: 'div',
//   isSVGElement: false,
// })
//
// export interface ContextMenuToolOptions extends ToolsView.ToolItem.Options {
//   x: number;
//   y: number;
//   menu?: any;
// }


export default defineComponent({
  name: "contextmenu",
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLDivElement,
      width: 800,
      height: 600,
      grid: {
        visible: true,
      },
      panning: true,
      mousewheel: true,
      resizing: true,
    })

    const source = graph.addNode({
      x: 180,
      y: 60,
      width: 100,
      height: 40,
      attrs: {
        body: {
          fill: '#f5f5f5',
          stroke: '#d9d9d9',
          strokeWidth: 1,
        },
      },
    })

    const target = graph.addNode({
      x: 320,
      y: 250,
      width: 100,
      height: 40,
      attrs: {
        body: {
          fill: '#f5f5f5',
          stroke: '#d9d9d9',
          strokeWidth: 1,
        },
      },
    })

    graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#a0a0a0',
          strokeWidth: 1,
        },
      },
    })


    graph.on('cell:contextmenu', ({ cell, e }) => {
      const p = graph.clientToGraph(e.clientX, e.clientY)
      cell.addTools([
        {
          name: 'contextmenu',
          args: {
            // menu,
            menu: document.getElementById("cmenu"),
            x: p.x,
            y: p.y,
          },
        },
      ])
      console.log(cell.getTools())

      const onMouseDown = () => {
        cell.removeTools()
        document.removeEventListener('mousedown', onMouseDown)
      }

      document.addEventListener('mousedown', onMouseDown)
    })

    graph.zoomTo(0.8)
  }
})
</script>

<style scoped>

</style>
